<template>
  <div>
    <div class="cart-item">
      <van-swipe-cell v-for="(item, index) in AddLocal" :key="index">
        <van-card :price="item.price" :title="item.subcname" :thumb="item.scpic" />
        <template #right>
          <van-button @click="dele(item)" square text="删除" type="danger" class="delete-button" />
        </template>
        <template> 
          <input type="checkbox" @click="checkedClick(item)" class="checked" :checked="item.checked">
        </template>
        <template>
          <van-stepper
            class="stepper"
            @change="onChacge"
            v-model="item.count"
          />
        </template>
      </van-swipe-cell>
    </div>
    <van-submit-bar :price="allmoney*100" button-text="提交订单">
      <input type="checkbox" @click="All" :checked="Allcheckbox"/>
      全选
    </van-submit-bar>
  </div>
</template>

<script>
export default {
  computed: {
    // 购物车的列表
    AddLocal(){
      return this.$store.state.AddLocal;
    },
    // 绑定全选复选框
    Allcheckbox(){
       return this.$store.state.Allcheckbox;
    },
    allmoney(){
      return this.$store.state.allmoney;
    }
  },
  methods: {
    //  全选
    All($event) {
      // console.log($event.target.checked);
      this.$store.dispatch('ALL',$event.target.checked)
    },
    //  步进器
    onChacge() {
      localStorage.setItem('GoodsList',JSON.stringify(this.$store.state.AddLocal))
    },
    //  复选框
    checkedClick(item) {
      console.log(item);
      
      this.$store.dispatch('CHECKEDCLICK',item)
    },
    //  删除
    dele() {}
  }
};
</script>

<style  scoped>
.cart {
  margin-bottom: 50px;
}
.van-card {
  padding-left: 50px;
}
.van-card__content {
  position: relative;
}
.van-card__bottom .van-card__price {
  position: absolute;
  top: 40px;
  color: red;
}
.cart-item {
  position: relative;
}
.stepper {
  position: absolute;
  top: 70px;
  left: 150px;
}

.checked {
  position: absolute;
  top: 45px;
  left: 15px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
}
.goods-card {
  margin: 0;
  background-color: white;
}

.delete-button {
  height: 100%;
}
</style>